<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>校园活动-报名二维码</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody qrcode-body">
        <div class="qrcode-body-list" v-if="styleRole.indexOf(2)!==-1||styleRole.indexOf(3)!==-1">
          <div class="forumcode savebox" ref="imageDom">
            <img src="@/assets/imageAdmin/codebg.png" alt="" class="saveimgBg">
            <div class="apply-code-title">
              <p class="title-top">校园活动</p>
              <p class="title-article">学校：{{ schoolName }}</p>
              <p class="title-article">活动：{{ detailData ? detailData.title : '--' }}</p>
              <p class="title-article">身份：{{styleRoleList.join('/')}}</p>
              <p class="title-article" v-if="detailData">时间：{{ detailData.start_time }}至{{ detailData.end_time }}</p>
              <div class="title-body">
              </div>
              <div class="apply-code-img" style="width:220px;">
                <div id="qrcode"></div>
              </div>
              <p class="getcode">扫码报名</p>
            </div>
          </div>
        </div>
        <div class="" v-if="styleRole.indexOf(1)!==-1">
          <div class="forumcode savebox" ref="imageDomTeacher">
            <img src="@/assets/imageAdmin/codebg.png" alt="" class="saveimgBg">
            <div class="apply-code-title">
              <p class="title-top">校园活动</p>
              <p class="title-article">学校：{{ schoolName }}</p>
              <p class="title-article">活动：{{ detailData ? detailData.title : '--' }}</p>
              <p class="title-article">身份：全校职工</p>
              <p class="title-article" v-if="detailData">时间：{{ detailData.start_time }}至{{ detailData.end_time }}</p>
              <div class="title-body">
              </div>
              <div class="apply-code-img" style="width:220px;">
                <div id="qrcode_teacher"></div>
              </div>
              <p class="getcode">扫码报名</p>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">返回</el-button>
        <el-button @click.native="downloadIamge(1)" size="small" type="primary" plain
                   v-if="styleRole.indexOf(2)!==-1||styleRole.indexOf(3)!==-1">下载校外报名二维码
        </el-button>
        <el-button @click.native="downloadIamge(2)" size="small" type="primary" plain v-if="styleRole.indexOf(1)!==-1">
          下载职工报名二维码
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
import {systemIndex} from '@/api/admin/system';
import {activityDetail} from "@/api/admin/school"

export default {
  props: ['visible', 'detailId'], // recruitmentType examine 审核
  components: {},
  data() {
    return {
      dialogVisible: false,
      detailData: null,
      schoolName: '',
      styleRole: [],
      parentsImg: '',
      teacherImg: '',
      styleRoleList: []
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.getDetail()
      } else {
        this.styleRole = []
        this.detailData = null
        this.styleRoleList = []
      }
    }
  },
  created() {

  },
  methods: {
    getDetail() {
      activityDetail({id: this.detailId}).then(res => {
        console.log('res:', res)
        let data_ = JSON.parse(JSON.stringify(res.vo))
        data_.start_time = data_.start_time.split(' ')[0]
        data_.end_time = data_.end_time.split(' ')[0]
        this.styleRole = data_.style.split(',').map(Number)
        if(this.styleRole.indexOf(2)!==-1){
          this.styleRoleList.push('家长')
        }
        if(this.styleRole.indexOf(3)!==-1){
          this.styleRoleList.push('访客')
        }
        this.detailData = data_
        this.qrcodeGet()
      })
    },
    // 生成二维码 subProjects
    qrcodeGet() {
      let self_ = this
      systemIndex({}).then(response => {
        this.schoolName = response.vo.name
        // 需要判断详情的用户身份类型
        if(this.styleRole.indexOf(2)!==-1||this.styleRole.indexOf(3)!==-1){
          let qrcode = new QRCode('qrcode', {
            width: 200,
            height: 200, // 高度
            text: `${response.vo.url}/program/#/campusActivities?id=${this.detailId}`// 二维码内容
          })
          setTimeout(() => {
            self_.html2canvasFn('imageDom')
          }, 200)
        }
        if(this.styleRole.indexOf(1)!==-1) {
          let qrcodeTeacher = new QRCode('qrcode_teacher', {
            width: 200,
            height: 200, // 高度
            text: `${response.vo.url}/workers/#/campusActivities?id=${this.detailId}`// 二维码内容
          })
          setTimeout(() => {
            self_.html2canvasFn('imageDomTeacher')
          }, 200)
        }
      })
    },
    html2canvasFn(option) {
      let self_ = this
      let opts = {
        useCORS: true
      }
      html2canvas(self_.$refs[option], opts).then(canvas => {
        let image = new Image()
        image.onload = function () {
          if(option==='imageDom'){
            self_.parentsImg = canvas.toDataURL('image/png')
          }else{
            self_.teacherImg = canvas.toDataURL('image/png')
          }
          self_.codeloading = false
        }
        image.src = canvas.toDataURL('image/png')
      })
    },
    downloadIamge(type) { // 下载图片地址和图片名
      let image = new Image()// 解决跨域 Canvas 污染问题
      let this_ = this
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据

        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download =`${this_.detailData.title }-报名`// 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      if(type===1){
        image.src = this.parentsImg
      }else{
        image.src = this.teacherImg
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: auto;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.qrcode-body {
  display: flex;
}

.qrcode-body-list {
  margin-right: 10px;
}
</style>


